<template>
  <div class="account">
    <div class="warpper">
      <div class="header">
        <div class="headerCom">
          <div class="ac_td">
            <div class="left">
              <p>总资产</p>
              <div class="money">{{ result.now_money}}</div>
            </div>
            <div class="right">
              <button>充值</button>
            </div>
          </div>
          <div class="ac_dd">
            <div class="ac_dd_item">
              <p>积累充值（元）</p>
              <div class="money">{{ result.recharge}}</div>
            </div>
            <div class="ac_dd_item">
              <p>积累消费（元）</p>
              <div class="money">{{result.orderStatusSum}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ac_nav">
        <a class="acn_item">
          <img src="../../../assets/icon/user/ac_zhang.png" alt="" />
          <p>账单记录</p>
        </a>
        <a class="acn_item">
          <img src="../../../assets/icon/user/ac_xiaofei.png" alt="" />
          <p>消费记录</p>
        </a>
        <a class="acn_item">
          <img src="../../../assets/icon/user/ac_chongzhi.png" alt="" />
          <p>充值记录</p>
        </a>
        <a class="acn_item">
          <img src="../../../assets/icon/user/ac_zhanshi.png" alt="" />
          <p>积分记录</p>
        </a>
      </div>
      <div class="zz_box">
        <div class="dj_com jf">
          <div class="inf">
            <p class="inf_td">签到领积分</p>
            <p class="inf_dd">赚积分抵现金</p>
          </div>
          <div class="img">
            <img src="../../../assets/icon/user/ac_jf.png" alt="" />
          </div>
        </div>
        <div class="dj_com yj">
          <div class="inf">
            <p class="inf_td">签到优惠卷</p>
            <p class="inf_dd">满减享优惠</p>
          </div>
          <div class="img">
            <img src="../../../assets/icon/user/ac_hongbao.png" alt="" />
          </div>
        </div>
      </div>
      <div class="tt_com">
        <div class="ttc_item">
          <div class="tti_left">
            <div class="pic">
              <img src="../../../assets/icon/user/ac_pingtu.png" alt="" />
            </div>
            <div class="info">
              <p class="in_td">最新拼团活动</p>
              <p class="in_dd">最新的优惠商品上架拼团</p>
            </div>
          </div>
          <div class="tti_right">已结束</div>
        </div>
        <div class="ttc_item">
          <div class="tti_left">
            <div class="pic">
              <img src="../../../assets/icon/user/ac_kanjia.png" alt="" />
            </div>
            <div class="info">
              <p class="in_td">最新拼团活动</p>
              <p class="in_dd">最新的优惠商品上架拼团</p>
            </div>
          </div>
          <div class="tti_right">已结束</div>
        </div>
        <div class="ttc_item">
          <div class="tti_left">
            <div class="pic">
              <img src="../../../assets/icon/user/ac_shandian.png" alt="" />
            </div>
            <div class="info">
              <p class="in_td">最新拼团活动</p>
              <p class="in_dd">最新的优惠商品上架拼团</p>
            </div>
          </div>
          <div class="tti_right">已结束</div>
        </div>
      </div>
    </div>
    <my-recommend></my-recommend>
  </div>
</template>

<script>
export default {
  data(){
    return{
      result:[]
    }
  },
  created(){
    this.initData()
  },
  methods:{
    initData(){
      let url = "/api/user/balance";
      let token = localStorage.getItem('token')
      
      let pro = axios({
        method: "GET",
        url:url,
      
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          console.log("成功",res.data)
          this.result = res.data.data
        })
        .catch(err=>{
          console.log("失败")
        })
        
    
    }
  }
};
</script>

<style lang="scss" scoped>
.warpper {
  background-color: #fff;
  padding: 16px 0 17px;
  .header {
    width: 345px;
    height: 165px;

    background-image: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#f33b2b),
      to(#f36053)
    );
    background-image: linear-gradient(90deg, #f33b2b 0, #f36053);
    background-image: -moz-linear-gradient(to right, #f33b2b 0, #f36053 100%);
    border-radius: 0.16rem;
    margin: 0 auto;
    color: hsla(0, 0%, 100%, 0.6);
    font-size: 0.24rem;
    .headerCom {
      width: 100%;
      height: 100%;
      background: url(../../../assets/icon/user/ac_bg2.png) no-repeat;
      background-size: 100% 100%;
      padding: 17px 0px;
      .ac_td {
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        .left {
          p {
            font-size: 12px;
          }
          .money {
            font-size: 22px;
            color: #fff;
            font-family: guildfordprobook\5;
            margin-top: 3px;
            height: 30px;
            line-height: 30px;
          }
        }
        .right {
          button {
            width: 90px;
            height: 35px;
            border-radius: 17.5px;
            background-color: #fff9f8;
            color: #fc4141;
            border: 0;
            outline: none;
          }
        }
      }

      .ac_dd {
        margin-top: 28px;
        height: 40px;
        .ac_dd_item {
          float: left;
          width: 150px;
          padding-left: 17px;
          p {
            font-size: 12px;
          }
          .money {
            font-size: 24px;
            color: #fff;
            height: 33px;
            line-height: 33px;
          }
        }
      }
    }
  }

  .ac_nav {
    display: flex;
    .acn_item {
      flex: 1;
      text-align: center;
      padding: 16px 0;
      border-bottom: 1px solid #f5f5f5;
      p {
        //   text-align: center;
        color: #999;
        font-size: 13px;
      }
      > img {
        width: 22px;
        height: 22px;
      }
    }
  }

  .zz_box {
    display: flex;
    justify-content: space-between;
    margin-top: 17px;
    padding: 0 15px;
    .dj_com {
      width: 166px;
      height: 59px;
      border-right: 12px;
      padding: 0 13px 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      //   background-color: #fff6d1;
      .inf {
        .inf_td {
          font-size: 15px;
          font-weight: 700;
          color: #f33c2b;
          margin-bottom: 0.07rem;
        }
        .inf_dd {
          font-size: 12px;
          font-weight: 400;
          color: #e44609;
          margin-bottom: 0.07rem;
        }
      }
      .img {
        width: 39px;
        height: 39px;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .jf {
      background-color: #fff6d1;
    }
    .yj {
      background-color: #fff3f3;
    }
  }

  .tt_com {
    padding: 0 15px;
    .ttc_item {
        margin-top: 22px;
      width: 100%;
      height: 41px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tti_left {
        display: flex;
        align-items: center;
        .pic {
          width: 41px;
          height: 41px;
          border-radius:20.5px ;
            text-align: center;
            line-height: 41px;
          > img {
              vertical-align: middle;
            width: 20px;
            height: 20px;
          }
        }
        .info {
          padding-left: 15px;
          .in_td {
            color: #282828;
            font-size: 15px;
          }
          .in_dd {
              margin-top: 3px;
            color: #9999;
            font-size: 12px;
          }
        }
      }
      .tti_right {
        font-size: 13px;
        color: #aaa;
        background-color: #f2f2f2;
        border-color: #f2f2f2;
        width: 60px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 13px;
      }
    }

    .ttc_item:nth-child(1) .pic {
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#ff9389),
        to(#f9776b)
      );
      background-image: linear-gradient(90deg, #ff9389 0, #f9776b);
    }
    .ttc_item:nth-child(2) .pic {
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#fca),
        to(#fea060)
      );
      background-image: linear-gradient(90deg, #fca 0, #fea060);
    }
    .ttc_item:nth-child(3) .pic {
      background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#a1d67c),
        to(#9dd074)
      );
      background-image: linear-gradient(90deg, #a1d67c 0, #9dd074);
    }
  }
}
/deep/.no_good{
    display: none;
}
</style>